<template>
  <el-form class="form" :inline="inline" :model="tableData.extra" :label-width="labelWidth">
    <slot></slot>

    <!-- 隐藏的列 --->
    <slot v-if="hide" name="hide"></slot>
    <sys-search-btn class="btn" :loading="loading" :showFold="showFold" @onFlod="onFlod" :resets="resets" :cleanExtra="cleanExtra">
      <!-- 自定义按钮 --->
      <slot name="button"></slot>
    </sys-search-btn>
  </el-form>
</template>

<script setup lang="ts">
const tableData = inject<TableData>('tableData') as TableData
defineProps({
  /**
   * 是否内联表单
   */
  inline: { type: Boolean, default: true },
  /**
   * 对齐
   */
  labelWidth: { type: String, default: '80px' },
  /**
   * 搜索按钮的加载状态（非必须）
   */
  loading: Boolean,
  /**
   * 是否显示展开收起按钮
   */
  showFold: { type: Boolean, default: true },
  /**
   * 重置的默认值，不会重置该默认值
   */
  resets: { type: Object, default: null },
  /**
   * 是否清空全部值
   */
  cleanExtra: { type: Boolean, default: true }
})
const hide = ref(false)

const onFlod = (flag: boolean) => {
  hide.value = flag
}
</script>

<style scoped lang="scss">
.form {
  .btn {
    float: right;
    margin-bottom: 20px;
  }
}
</style>
